<template>
  <page-wrap ref="pageWrap" hideTab back :title="dynamicTitle" :showTop="dynamicTitle" :dark="loaded ? false : true"
    :bg-color="dynamicColor" :callBackUrl="gotoMyTabUrl" :hideSafeArea="true">
    <view class="wrapper" :style="'padding-top:' + navHeight + 'px;'">
      <view class="top-title"> 选科查专业/大学 </view>
      <view class="title-desc">选择科目进行组合，查询可报考的专业、院校的匹配率</view>
      <view class="choose-subject">
        <view class="choose-title">
          <view class="left">首选</view>
          <view class="right">选择一门学科</view>
        </view>
        <view class="choose-box">
          <view :class="
              item.id == currentFirstSubject.id
                ? 'choose-box-item-selected'
                : 'choose-box-item'
            " v-for="(item, index) in firstSubject" :key="index" @click="selectFirstSubject(item)">{{ item.name }}
          </view>
        </view>
        <view class="choose-title">
          <view class="left">再选</view>
          <view class="right">选择二门学科</view>
        </view>
        <view class="choose-box">
          <view :class="
              currentSecondSubjectList.includes(item)
                ? 'choose-box-item-selected'
                : 'choose-box-item'
            " v-for="(item, index) in secondSubject" :key="index" @click="selectSecondSubject(item)">{{ item.name }}
          </view>
        </view>
        <view class="show-data">
          <view class="left-data">可选院校匹配率<span :class="
                parseFloat(schoolData) > 65 ? 'active-color' : '-unactive-color'
              ">{{ Number(schoolData).toFixed(2) || "" }}%</span></view>
          <view class="blue-column"></view>
          <view class="right-data">可选专业匹配率<span :class="
                parseFloat(majorData) > 65 ? 'active-color' : '-unactive-color'
              ">{{ Number(majorData).toFixed(2) || "" }}%</span></view>
        </view>
        <view class="search-btn" @click="jumpToSearchMajor">查询</view>
      </view>
      <view class="result-list">
        <view class="title">
          <view class="titleContent">
            <view class="blue-flame"></view>
            <span>科目组合专业匹配率</span>
          </view>
          <span class="titleDesc">专业匹配率</span>
        </view>
        <view :class="
              index == resultList.length - 1
                ? 'result-item-no-border'
                : 'result-item'
            " v-for="(item, index) in resultList" :key="index" @click="handleClickHotItem(item)">
          <view class="left-result">
            <view class="top">
              <view>{{ item.subjectTypeDesc }}</view>
              <view class="job-name">{{ item.labelTitle }}</view>
            </view>
            <view class="bottom">
              {{ item.distinctProfessionNum }}个专业、{{ item.collegeNum }}所院校
            </view>
          </view>
          <view class="right-result">
            <view class="circle-progress">{{ item.professionMatchRate }}%</view>
            <!-- <u-circle-progress
                :active-color="
                  Number(item.professionMatchRate.slice(0, -1)) >= 60
                    ? '#FFBB68'
                    : '#82E0B3'
                "
                :percent="item.professionMatchRate.slice(0, -1)"
                width="110"
                border-width="5"
              >
                <view class="u-progress-content">
                  <text class="u-progress-info"
                    >{{ item.professionMatchRate.slice(0, -1) }}%</text
                  >
                </view>
              </u-circle-progress> -->
          </view>
        </view>
      </view>
      <view class="bottomBlock"></view>
    </view>
    </view>
    <LoginDialog ref="loginDialog" :canClose='false' @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </page-wrap>
</template>

<script>
import {
  getProfessionMatchRate,
  getAllProfessionMatchRate,
} from "@/api/modules/gk";
import { cardRegist } from "@/api/modules/career";
import ShareMixin from "@/mixins/share";
import LoginDialog from "@/components/LoginDialog";
const classMap = new Map();
classMap.set("物理", "11");
classMap.set("历史", "12");
classMap.set("生物", "13");
classMap.set("化学", "14");
classMap.set("政治", "15");
classMap.set("地理", "16");
export default {
  mixins: [ShareMixin],
  components: {
    LoginDialog,
  },
  data() {
    return {
      personId: "",
      shareTitle: "震惊！同分数段的同学，靠选科组合提前锁定百万年薪赛道",
      sharePath:
        "/pagesSub/nationalCollegeEntranceExamination/index?where=share",
      imageUrl:
        "https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png",
      dynamicColor: "",
      dynamicTitle: "",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      navHeight: getApp().globalData.navHeight,
      firstSubject: [
        {
          name: "物理",
          id: "11",
        },
        {
          name: "历史",
          id: "12",
        },
      ],
      secondSubject: [
        {
          name: "化学",
          id: "14",
        },
        {
          name: "生物",
          id: "13",
        },
        {
          name: "政治",
          id: "15",
        },
        {
          name: "地理",
          id: "16",
        },
      ],
      currentFirstSubject: {}, // 当前选中的必须按科目
      currentSecondSubjectList: [], // 选择两个科目的数据
      schoolData: "",
      majorData: "",
      resultList: [
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "68.52", // 百分比
        },
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "88.52", // 百分比
        },
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "58.52", // 百分比
        },
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "78.52", // 百分比
        },
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "78.52", // 百分比
        },
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "48.52", // 百分比
        },
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "28.52", // 百分比
        },
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "78.52", // 百分比
        },
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "78.52", // 百分比
        },
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "78.52", // 百分比
        },
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "78.52", // 百分比
        },
        {
          subjectTypeDesc: "物理、化学、生物",
          labelTitle: "从政组合",
          distinctProfessionNum: "105", // 专业数量
          collegeNum: "100", // 学校数量
          professionMatchRate: "78.52", // 百分比
        },
      ],
    };
  },
  methods: {
    async cardRegistFn() {
      const params = {
        personId: this.personId,
        force: 1,
      };
      params.cardType = 143;
      const res = await cardRegist(params);
      return res;
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync("person-id").slice(2);
      this.cardRegistFn();
    },
    async getAllProfessionMatchRateFn() {
      const params = {
        csType: "1",
      };
      const res = await getAllProfessionMatchRate(params);
      if (res.code == 200) {
        this.resultList = res.data;
      }
    },
    async getProfessionMatchRateFn() {
      const params = {
        cpType: "30",
        subjectCombination:
          this.currentSecondSubjectList[0].id <
          this.currentSecondSubjectList[1].id
            ? this.currentFirstSubject.id +
              "," +
              this.currentSecondSubjectList[0].id +
              "," +
              this.currentSecondSubjectList[1].id
            : this.currentFirstSubject.id +
              "," +
              this.currentSecondSubjectList[1].id +
              "," +
              this.currentSecondSubjectList[0].id,
        csType: "1",
      };
      const res = await getProfessionMatchRate(params);
      if (res.code == 200) {
        this.schoolData = res.data.collegeMatchRate;
        this.majorData = res.data.professionMatchRate;
      }
    },
    handleClickHotItem(item) {
      const subjectList = item.subjectTypeDesc.split("、");
      const firstId = classMap.get(subjectList[0]);
      const secondId = classMap.get(subjectList[1]);
      const thirdId = classMap.get(subjectList[2]);
      const currentFirstSubject = { name: subjectList[0], id: firstId };
      const currentSecondSubjectList = [
        { name: subjectList[1], id: secondId },
        { name: subjectList[2], id: thirdId },
      ];
      uni.navigateTo({
        url:
          "/pagesSub/nationalCollegeEntranceExamination/searchMajor/index?currentFirstSubject=" +
          encodeURIComponent(JSON.stringify(currentFirstSubject)) +
          "&currentSecondSubjectList=" +
          encodeURIComponent(JSON.stringify(currentSecondSubjectList)),
      });
    },
    jumpToSearchMajor() {
      if (
        this.currentSecondSubjectList.length == 2 &&
        this.currentFirstSubject.id
      ) {
        uni.navigateTo({
          url:
            "/pagesSub/nationalCollegeEntranceExamination/searchMajor/index?currentFirstSubject=" +
            encodeURIComponent(JSON.stringify(this.currentFirstSubject)) +
            "&currentSecondSubjectList=" +
            encodeURIComponent(JSON.stringify(this.currentSecondSubjectList)),
        });
      } else {
        uni.showToast({
          title: "请选择科目",
          icon: "none",
          duration: 2000,
        });
      }
    },
    selectFirstSubject(item) {
      this.currentFirstSubject = item;
      if (
        this.currentSecondSubjectList.length == 2 &&
        this.currentFirstSubject.id
      ) {
        // 此时就调用接口获取数据
        this.getProfessionMatchRateFn();
      }
    },
    selectSecondSubject(item) {
      console.log("currentFirstSubject", this.currentFirstSubject);
      if (this.currentSecondSubjectList.includes(item)) {
        return;
      } else {
        this.currentSecondSubjectList.push(item);
        if (this.currentSecondSubjectList.length > 2) {
          this.currentSecondSubjectList.shift();
        }
        if (
          this.currentSecondSubjectList.length == 2 &&
          this.currentFirstSubject.id
        ) {
          // 此时就调用接口获取数据
          this.getProfessionMatchRateFn();
        }
      }
    },
  },
  created() {
    this.getAllProfessionMatchRateFn();
  },
  onLoad() {
    if (!this.personId) {
      this.$refs.loginDialog.setVisibility(true);
      return;
    }
    this.imageUrl =
      "https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png"; //必须重新赋值
  },
  onPageScroll(e) {
    //滚动改变颜色
    if (e.scrollTop >= 30) {
      this.dynamicTitle = "选科查专业/大学";
      this.dynamicColor = "#cfe8fd";
    } else {
      this.dynamicTitle = "";
    }
  },
};
</script>
<style lang="scss" scoped>
@font-face {
  font-family: "AlimamaShuHeiTi-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/saas/AlimamaShuHeiTi-Bold.ttf");
}
$img-base-person: $img-base + "careerPath/";
.wrapper {
  background-image: url($img-base + "careerPath/majorDetailBg.png");
  background-size: 100% 832rpx;
  background-repeat: no-repeat;
  height: 85vh;
  padding: 0 32rpx;
  .top-title {
    height: 58rpx;
    font-family: "AlimamaShuHeiTi-Bold";
    font-size: 48rpx;
    color: #222222;
    line-height: 68rpx;
  }
  .title-desc {
    height: 36rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #222222;
    line-height: 36rpx;
    margin-top: 30rpx;
  }
  .choose-subject {
    height: 578rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin-top: 46rpx;
    padding: 24rpx;
    .choose-title {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      .left {
        height: 42rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 30rpx;
        color: #222222;
        line-height: 42rpx;
      }
      .right {
        height: 36rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
        line-height: 36rpx;
        margin-left: 24rpx;
      }
    }
    .choose-box {
      margin: 28rpx 0 40rpx 0;
      display: flex;
      align-items: center;
      .choose-box-item,
      .choose-box-item-selected {
        width: 146rpx;
        height: 72rpx;
        border-radius: 8rpx;
        margin-right: 16rpx;
        font-size: 28rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
      .choose-box-item {
        border: 2rpx solid #d9d9d9;
        color: #333333;
      }
      .choose-box-item-selected {
        border: 2rpx solid #f75a3e;
        color: #f75a3e;
      }
    }
    .show-data {
      height: 78rpx;
      background: #f5fbff;
      border-radius: 8rpx 8rpx 0rpx 0rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .active-color {
        color: #ff8c00;
      }
      .-unactive-color {
        color: #00ac51;
      }
      .blue-column {
        width: 2rpx;
        height: 38rpx;
        border: 2rpx solid #b6d5e8;
        margin: 0 30rpx;
        background-color: #b6d5e8;
      }
      .left-data {
        color: #4079a8;
        font-size: 24rpx;
        span {
          margin-left: 8rpx;
          font-size: 28rpx;
          // color: #ff8c00;
        }
      }
      .right-data {
        color: #4079a8;
        font-size: 24rpx;
        span {
          margin-left: 8rpx;
          font-size: 28rpx;
          // color: #00ac51;
        }
      }
    }
    .search-btn {
      height: 80rpx;
      background: #f75a3e;
      border-radius: 8rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 30rpx;
      color: #ffffff;
    }
  }
  .result-list {
    background: #ffffff;
    border-radius: 10rpx;
    padding: 26rpx 24rpx;
    margin-top: 32rpx;
    margin-bottom: 80rpx;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;
      .titleContent {
        display: flex;
      }
      .blue-flame {
        width: 36rpx;
        height: 36rpx;
        background-image: url($img-base-person + "gkxk/blue-flame.png");
        background-size: 100%;
        margin-right: 16rpx;
      }
      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #222222;
      }
      .titleDesc {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        line-height: 17px;
        text-align: left;
        font-style: normal;
      }
    }
    .result-item,
    .result-item-no-border {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 142rpx;
      .left-result {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
        .top {
          display: flex;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #222222;
          font-weight: 600;
          .job-name {
            margin-left: 16rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            // width: 136rpx;
            height: 44rpx;
            background: #e7f5fe;
            border-radius: 4rpx;
            font-weight: 400;
            font-size: 26rpx;
            color: #1a69ff;
            padding: 4rpx 16rpx;
          }
        }
        .bottom {
          font-weight: 400;
          font-size: 26rpx;
          color: #888888;
        }
      }
      .right-result {
        .circle-progress {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          color: #333333;
          font-family: "AlimamaShuHeiTi-Bold";
          font-size: 26rpx;
          border: 8rpx solid #f7f7f7;
        }
        .u-progress-content {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .u-progress-info {
          //   font-size: 26rpx;
          //   padding-left: 12rpx;
          //   letter-spacing: 2rpx;
          font-family: D-DIN-PRO, D-DIN-PRO;
          font-weight: bold;
          font-size: 26rpx;
          color: #333333;
        }
      }
    }
    .result-item {
      border-bottom: 2rpx solid #f5f5f5;
    }
  }
  .bottomBlock {
    width: 100px;
    height: 40rpx;
  }
}
</style>
